<template>
    <view class="bottom">
        <Header></Header>
        <view>
            <view class="back">
                <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                        name="arrow-left" color="#00eaff" @click="back"></u-icon>
                <text style="color: #00eaff;padding-right: 30rpx">Personal details</text>
            </view>
            <view>
                <u-tabs :list="list" @change="change" :current="current" :is-scroll="false"
                        bg-color="#0f0e2d" inactive-color="#4e5278" active-color="#00eaff"
                        :active-item-style="{color: '#00eaff', fontSize: '28rpx'}">
                </u-tabs>
            </view>
            <view v-if="current===0">
                <view class="title">
                    <view class="type">Type</view>
                    <view class="name">Name</view>
                    <view class="coin">Change</view>
                    <view class="time">Time</view>
                </view>
                <view v-for="(item,index) in diamondList" :key="index">
                    <view class="item">
                        <view class="item-name">{{ item.type_name }}</view>
                        <view class="item-str">{{ item.type_str }}</view>
                        <view class="item-coin">{{ item.coin }}</view>
                        <view class="item-time">{{ item.create_time }}</view>
                    </view>
                </view>
            </view>
            <view v-if="current===1">
                <view class="title">
                    <view class="type">Type</view>
                    <view class="name">Name</view>
                    <view class="coin">Change</view>
                    <view class="time">Time</view>
                </view>
                <view v-for="(item,index) in ShopScoreList" :key="index">
                    <view class="score">
                        <view class="score-desc">{{ item.desc }}</view>
                        <view class="score-name">{{ item.goods_name }}</view>
                        <view class="score-coin">{{ item.coin }}</view>
                        <view class="score-time">{{ item.create_time }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view v-if="noMore">
            <u-divider style="padding: 30rpx" bg-color="#0f0e2d">There's no more data left</u-divider>
        </view>
        <u-toast ref="uToast"/>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: "detail",
    components: {
        CustomTabbar,
        Header
    },
    data() {
        return {
            list: [{
                name: 'Diamond statistics'

            }, {
                name: 'Points details'
            }],
            current: 0,
            // 钻石明细
            diamondList: [],
            // 积分明细
            ShopScoreList: [],
            total: 0,
            current_page: 1,
            last_page: 0,
            // 到底
            noMore: false,
        };
    },
    onShow() {
        this.getMyCoin();
    },
    // 触底加载更多
    onReachBottom() {
        this.current_page++
        if (this.current === 0) {
            this.$u.api.getMyCoin({
                page: this.current_page,
            }).then(res => {
                if (res.data.record.data.length === 0) {
                    this.noMore = true;
                    return
                }
                this.noMore = false;
                this.diamondList = this.diamondList.concat(res.data.record.data)
                this.total = res.data.record.total
                this.current_page = res.data.record.current_page
                this.last_page = res.data.record.last_page
            })
        } else if (this.current === 1) {
            this.$u.api.getShopScore({
                page: this.current_page,
            }).then(res => {
                if (res.data.data.length === 0) {
                    this.noMore = true;
                    return
                }
                this.noMore = false;
                this.ShopScoreList = this.ShopScoreList.concat(res.data.data)
                this.total = res.data.record.total
            })
        }
    },
    methods: {
        // 返回
        back() {
            this.$u.route({
                type: 'navigateBack',
                delta: 1
            })
        },
        // 切换
        change(index) {
            this.current = index;
            if (index === 0) {
                this.getMyCoin()
            } else if (index === 1) {
                this.getShopScore()
            }
        },
        // 获取钻石明细
        getMyCoin() {
            this.current_page = 1
            this.$u.api.getMyCoin({
                page: this.current_page,
            }).then(res => {
                if (res.code === 1) {
                    // console.log(res);
                    // 没数据
                    if (res.data.record.data.length === 0) {
                        this.noMore = true;
                        this.diamondList = [];
                        return
                    }
                    this.noMore = false;
                    this.diamondList = res.data.record.data;
                    this.total = res.data.record.total;
                    this.current_page = res.data.record.current_page;
                    this.last_page = res.data.record.last_page;
                }
            })
        },
        // 获取积分明细
        getShopScore() {
            this.current_page = 1
            this.$u.api.getShopScore({
                page: this.current_page,
            }).then(res => {
                if (res.code === 1) {
                    // console.log(res);
                    // 没数据
                    if (res.data.data.length === 0) {
                        this.noMore = true;
                        this.ShopScoreList = [];
                        return
                    }
                    this.noMore = false;
                    this.ShopScoreList = res.data.data;
                    this.total = res.data.total;
                    this.current_page = res.data.current_page;
                    this.last_page = res.data.last_page;
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.back {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.title {
    background-color: #4b639e;
    display: flex;
    align-items: center;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 15rpx;

    .type {
        width: 25%;
        text-align: center;
    }

    .name {
        width: 25%;
        text-align: center;
    }

    .coin {
        width: 25%;
        text-align: center;
    }

    .time {
        width: 25%;
        text-align: center;
    }
}

.item {
    background-color: #2f3a68;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 15rpx;
    display: flex;
    align-items: center;

    .item-name {
        width: 25%;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-str {
        width: 25%;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-coin {
        width: 25%;
        text-align: center;
    }

    .item-time {
        width: 25%;
        text-align: center;
    }

}

.score {
    background-color: #2f3a68;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 15rpx;
    display: flex;
    align-items: center;

    .score-desc {
        width: 25%;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .score-name {
        width: 25%;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .score-coin {
        width: 25%;
        text-align: center;
    }

    .score-time {
        width: 25%;
        text-align: center;
    }
}
</style>
